/*
Alert
==============================================
Custom skin styling for bootstrap alert component.

https://getbootstrap.com/docs/5.2/components/alerts
*/

.alert {
    .icon {
        margin-right: $spacer-sm;
        flex-shrink: 0;

        svg {
            top: 0;
        }
    }
}

@each $state, $value in $theme-colors {
    .alert-#{$state} {
        --#{$prefix}alert-border-color: #{$value};
        --#{$prefix}alert-bg: #{saturate(tint-color($value, 90%), 40%)};
        --#{$prefix}alert-color: #{$body-color};
    }
}
